<template>
    <div class="div-wrapper parttime-wrapper">
        <div class="container">
            <div class="title">
                {{$store.state.language === 'zh-CN' ? "学术兼职" : "Professional Services"}}
            </div>
            <div v-if="$store.state.language === 'zh-CN'" class="content ql-editor" v-html="content">
                {{content}}
            </div>
            <div v-else class="content ql-editor" v-html="enContent">
                {{enContent}}
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import $api from '../../api';
import { Loading , Notification} from 'element-ui';

@Component
export default class PartTime extends Vue{
    private content: string = '';
    private enContent: string = '';
    private targetName: string = 'part_time_job';

    private mounted() {
        this.getContent();
    }
    private getContent() {
        const loadInstance = Loading.service({target: '.ql-editor'});
        $api.module.findContentByName(this.targetName)
        .then((res) => {
            this.content = (res as any).content;
            loadInstance.close();
        }).catch((error) => {
            loadInstance.close();
            Notification({
                title: '网络异常',
                message: error,
                type: 'error',
            });
        })
        $api.module.findContentByName('en_' + this.targetName)
        .then((res) => {
            this.enContent = (res as any).content;
        })
    }
}
</script>